<template>
  <div id="app-wrapper">
    <div id="scroll-container">
      <div id="app">
        <!-- 顶部状态栏组件（除登录页外都显示） -->
        <TopStatusBar v-if="$route.path !== '/login'" />
        <!-- 路由视图，用于显示不同页面内容 -->
        <router-view />
        <!-- 底部导航栏组件（除登录页外都显示） -->
        <BottomNavigation v-if="$route.path !== '/login'" />
      </div>
    </div>
  </div>
</template>

<script>
// 导入底部导航组件
import BottomNavigation from './components/BottomNavigation.vue'
// 导入顶部状态栏组件
import TopStatusBar from './components/TopStatusBar.vue'
// 导入游戏状态管理store
import { useGameStateStore } from './stores/gameState'
// 导入Element Plus图标组件
import { 
  ArrowLeft, 
  User, 
  Location, 
  House, 
  Box, 
  Setting 
} from '@element-plus/icons-vue'

export default {
  name: 'App',
  // 注册使用的组件
  components: {
    BottomNavigation,
    TopStatusBar,
    ArrowLeft,
    User,
    Location,
    House,
    Box,
    Setting
  },
  setup() {
    // 初始化游戏状态
    const gameState = useGameStateStore()
    
    return {
      gameState
    }
  }
}
</script>

<style>
/* 应用根元素样式 */
#app {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 60px; /* 为底部导航留出空间 */
  padding-top: 50px; /* 为顶部状态栏留出空间 */
  user-select: none; /* 禁止文本选择 */
  -webkit-user-select: none; /* Safari兼容 */
  -moz-user-select: none; /* Firefox兼容 */
  -ms-user-select: none; /* IE兼容 */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-scrollbar: none; /* Chrome, Safari and Opera */
}

/* 新增的全局容器，用于控制滚动条 */
#scroll-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-scrollbar: none; /* Chrome, Safari and Opera */
  z-index: 999;
}

/* 禁止文本选择的全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  #app {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #app {
    font-size: 13px;
    padding-bottom: 50px;
    padding-top: 40px; /* 移动端顶部状态栏适配 */
  }
  
  .el-card__header {
    padding: 10px 15px;
  }
  
  .el-card__body {
    padding: 10px 15px;
  }
  
  .el-button {
    min-height: 36px;
  }
}

/* 确保移动端触摸目标大小 */
button, 
a, 
input, 
select, 
textarea {
  min-height: 44px;
  min-width: 44px;
}

/* 移动端按钮触摸效果优化 */
.el-button,
.nav-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 移动端滚动优化 */
html {
  -webkit-overflow-scrolling: touch;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 移动端适配样式 */
@media screen and (max-width: 768px) {
  .el-card {
    margin: 10px;
  }
  
  .el-row {
    margin: 0 10px !important;
  }
  
  .el-col {
    padding: 0 5px !important;
  }
  
  .home-container {
    padding: 10px !important;
  }
  
  .character-info .card-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 5px;
  }
  
  .action-buttons .el-button {
    margin-bottom: 10px;
  }
  
  .login-card {
    width: 90% !important;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .login-container {
    padding: 20px 10px;
  }
}

/* 小屏幕手机适配 */
@media screen and (max-width: 480px) {
  .el-card__header,
  .el-card__body {
    padding: 10px !important;
  }
  
  .el-button {
    padding: 8px 12px !important;
  }
  
  .character-details p,
  .offline-details p {
    font-size: 14px;
  }
}
</style>